<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: common-header"></head>

<body>

	<!-- Navigation -->
	<nav th:replace="fragments/common :: common-navbar"></nav>

	<!-- Page Content -->
	<section class="jumbotron text-center">
		<div class="container">
			<h1 class="jumbotron-heading">TURTECH PRODUCT</h1>
			<p class="lead text-muted mb-0">Don't get overwhelmed with the
				awe ;)</p>
		</div>
	</section>
	<div class="container">
		<div class="row">
			<div class="col">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a th:href="@{/}">Home</a></li>
						<li class="breadcrumb-item"><a th:href="@{/products}">Products</a></li>
						<li class="breadcrumb-item active" aria-current="page"><span
							th:text="${product.name}"></span></li>
					</ol>
				</nav>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<!-- Image -->
			<div class="col-12 col-lg-6">
				<div class="card bg-light mb-3">
					<div class="card-body">
						<a href="" data-toggle="modal" data-target="#productModal"> <img
							class="img-fluid" src="https://dummyimage.com/800x800/55595c/fff" />
							<p class="text-center">Zoom</p>
						</a>
					</div>
				</div>
			</div>

			<!-- Add to cart -->
			<div class="col-12 col-lg-6 add_to_cart_block">
				<div class="card bg-light mb-3">
					<div class="card-body">
						<div class="col-xs-6 float-right">
							<div th:if="*{product.inStockNumber > 10}"
								class="alert alert-success">In Stock</div>
							<div
								th:if="*{product.inStockNumber < 10 and product.inStockNumber > 0}"
								class="alert alert-warning">
								Only <span th:text="${product.inStockNumber}"> </span> In Stock
							</div>
							<div th:if="*{product.inStockNumber == 0}"
								class="alert alert-danger">Unavailable</div>
						</div>
						<h4>
							Our Price: <span style="color: #db3208;">$<span
								th:text="${product.ourPrice}"></span></span>
						</h4>
						<p>
							List Price: <span style="text-decoration: line-through">$<span
								th:text="${product.listPrice}"></span></span> <span>| You save:
								$<span
								th:text="${#numbers.formatDecimal((product.listPrice - product.ourPrice), 0, 'COMMA', 2, 'POINT' )}"></span>
							</span>
						<div class="col-xs-5">
							<p>
								<strong>Manufacturer: </strong><span
									th:text="${product.manufacturer}"></span>
							</p>
							<p>
								<strong>Manufacture Date: </strong><span
									th:text="${product.manufactureDate}"></span>
							</p>
							<p>
								<strong>Category: </strong><span th:text="${product.category}"></span>
							</p>
							<p>
								<strong>Condition: </strong><span th:text="${product.condition}"></span>
							</p>
							<p>
								<strong>Shipping Weight: </strong><span
									th:text="${product.shippingWeight}"></span> kg
							</p>
						</div>
							<div>
								<div id="notEnoughStock" style="display: none;" class="alert alert-danger">Sorry, but we don't have enough items in stock to fulfill such an order</div>
								<div id="addSuccess" style="display: none;" class="alert alert-success">Added to cart</div>
								<label>Quantity :</label>
								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<button type="button"
											class="quantity-left-minus btn btn-danger btn-number"
											data-type="minus" data-field="qty">
											<i class="fa fa-minus"></i>
										</button>
									</div>
									<input type="text" class="form-control" id="qty" name="qty"
										min="1" max="100" th:value="1">
									<div class="input-group-append">
										<button type="button"
											class="quantity-right-plus btn btn-success btn-number"
											data-type="plus" data-field="qty">
											<i class="fa fa-plus"></i>
										</button>
									</div>
								</div>
							<button class="btn btn-success btn-lg btn-block text-uppercase add-to-cart"
								th:id="${product.id}">
								<i class="fa fa-shopping-cart"></i> Add To Cart
							</button>
						<div class="product_rassurance">
							<ul class="list-inline">
								<li class="list-inline-item"><i class="fa fa-truck fa-2x"></i><br />Fast
									delivery</li>
								<li class="list-inline-item"><i
									class="fa fa-credit-card fa-2x"></i><br />Secure payment</li>
								<li class="list-inline-item"><i class="fa fa-phone fa-2x"></i><br />+399
									99 999</li>
							</ul>
						</div>
						<div class="reviews_product p-3 mb-2 ">
							<span th:text="${userReviewPage.getNumberOfElements()}"></span> reviews <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
								class="fa fa-star"></i> <i class="fa fa-star"></i> <i
								class="fa fa-star"></i> (4/5) <a class="pull-right"
								href="#reviews">View all reviews</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<!-- Description -->
			<div class="col-12">
				<div class="card border-light mb-3">
					<div class="card-header bg-primary text-white text-uppercase">
						<i class="fa fa-align-justify"></i> Description & Specifications
					</div>
					<div class="card-body">
						<p class="card-text" th:text="${product.specifications}"></p>
						<p class="card-text" th:text="${product.description}"></p>
					</div>
				</div>
			</div>

			<!-- Reviews -->
			<div class="col-12" id="reviews">
				<div class="card border-light mb-3">
					<div class="card-header bg-primary text-white text-uppercase">
						<i class="fa fa-comment"></i> Reviews
					</div>
					<div class="card-body">
					<div th:if="${userReviewPage.isEmpty()}" class="alert alert-info">
						Oops, no reviews are present yet. Maybe you should leave the first one?
					</div>
						<div class="review"
							th:each="userReview, iStat : ${userReviewPage.content}">
							<i class="fa fa-calendar" aria-hidden="true"></i>
							<span th:text="${userReview.getTimestamp().toLocalDate() + ' ' + userReview.getTimestamp().toLocalTime()}"></span> <span class="fa fa-star"></span> <span
								class="fa fa-star"></span> <span class="fa fa-star"></span> <span
								class="fa fa-star"></span> <span class="fa fa-star"></span> by
							<span th:text="${userReview.getUser().getFirstName()} + ' ' + ${userReview.getUser().getLastName()}"></span>
							<p class="blockquote">
								<p class="mb-0" th:text="${userReview.getText()}"></p>
							</p>
							<hr>
						</div>
					</div>
					
					<!-- Reviews Pagination -->
					<div class="col-12"
						th:if="${userReviewPage != null and userReviewPage.totalPages > 1}">
						<nav aria-label="Pagination">
							<ul class="pagination">
								<li class="page-item disabled"
									th:class="${!userReviewPage.hasPrevious()} ? 'page-item disabled'">
									<a class="page-link"
									th:href="@{/productDetails#reviews(id=${product.id}, page=${userReviewPage.number})}">Previous</a>
								</li>
								<li class="page-item" th:each="pageNumber : ${pageNumbers}"
									th:class="${pageNumber==userReviewPage.number + 1} ? 'page-item active'">
									<a class="page-link" th:href="@{/productDetails#reviews(id=${product.id}, page=${pageNumber})}"
									th:inline="text">[[${pageNumber}]] <span class="sr-only"
										th:if="${pageNumber == userReviewPage.number + 1}">(current)</span></a>
								</li>
								<li class="page-item"
									th:class="${!userReviewPage.hasNext()} ? 'page-item disabled'">
									<a class="page-link"
									th:href="@{/productDetails#reviews(id=${product.id}, page=${userReviewPage.number + 2})}">Next</a>
								</li>
							</ul>
						</nav>
					</div>
					
					<!-- Leave a review -->
					<div class="card">
					<div class="card-body">
							<form th:action="@{/leaveReview}" method="post">
							<input type="hidden" th:field="*{product.id}" />
								<div class="form-group">
									<label for="text">Your Review</label>
									<textarea class="form-control" id="text"
									th:name="text" rows="6" required="required"></textarea>
								</div>
								<div class="mx-auto">
									<button type="submit" class="btn btn-primary text-right">Leave the review</button>
								</div>
							</form>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<!-- Modal image -->
	<div class="modal fade" id="productModal" tabindex="-1" role="dialog"
		aria-labelledby="productModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="productModalLabel"
						th:text="${product.name}">Product title</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<img class="img-fluid"
						src="https://dummyimage.com/1200x1200/55595c/fff" />
				</div>
			</div>
		</div>
	</div>

	<!-- Footer -->
	<footer th:replace="fragments/common :: common-footer"></footer>

	<div th:replace="fragments/common :: common-bottom"></div>

	<!-- Custom scripts for the page-->
	<script>
		/*<![CDATA[*/
        var loggedIn = /*[[${#httpServletRequest.getUserPrincipal()!=null}]]*/'';
		var inStock = /*[[${product.inStockNumber}]]*/'';
		var jointQty = 0;
		/*]]*/
	</script>
	<script type="text/javascript" th:src="@{/js/productDetails.js}"></script>
</body>
</html>